<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>11</div>

    <script>

        // 事件监听语法
        //   ele.addEventListener(事件类型 , 事件处理函数)
        //     add 添加    event事件   listen 听

        //   当需要给一个对象绑定多个同类型事件的时候，需要用到事件监听

        var oDiv = document.querySelector('div');

        // 事件监听多个事件都会执行
        // oDiv.addEventListener('click', function () {
        //     console.log('事件监听1')
        // })

        // oDiv.addEventListener('click', function () {
        //     console.log('事件监听2')
        // })


        // 低版本IE   IE8及以下
        // ele.attachEvent('on' + 事件类型 ， 事件处理函数)
        // oDiv.attachEvent('onclick', function () {
        //     console.log('事件监听1')
        // })

        // oDiv.attachEvent('onclick', function () {
        //     console.log('事件监听2')
        // })



        // 普通事件会发生覆盖
        // oDiv.onclick = function () {
        //     console.log('普通事件绑定1')
        // }
        // oDiv.onclick = function () {
        //     console.log('普通事件绑定2')
        // }


        addEvent(oDiv, 'click', function () {
            console.log(2);
        });

        function addEvent(ele, type, cb) {
            // 判断浏览器是否识别这个方法
            if (window.addEventListener) {
                // 执行这个方法
                ele.addEventListener(type, cb)
            } else {
                // IE
                ele.attachEvent('on' + type, cb)
            }
        }







    </script>

</body>

</html>